<!-- reｆ:　C:/Users/admin/Documents/HBuilderProjects/official_uniapp/pages/component/input/input.nvue -->

<template>
	<view>
		<!-- 选择框 -->
		<view class='picker_view'>
			<!-- 文本 -->
			<view class='picker_text'>
				<text>{{dc.text}}</text>
			</view>
			
			<!-- 普通输入框 -->
			<view class="picker_input">
				<input :maxlength="dc.maxlength||18" 
				:placeholder="dc.placeholder" 
				:type="dc.type" 
				:value="dc.value"
				@oninput="oninput"
				@input="getInput" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"bdinput",
		props: ['dc'],
		data() {
			return {
				value: "",
			};
		},
		watch:{
			},
		methods:{
			
			retMsg () {
				var res = {
					'value': this.value,
					'dc': this.dc,
				}
				this.$emit('retMsg', res);
			},
			// oninput(e){
			// 	console.log('~~~~~~~~~~~~~~')
			// 	var value = e.detail.value;
			// 	if(value>30)	value=30;
			// 	if(value<0)		value=0;
			// 	this.value = value;
			// },
			getInput (e) {
				var range = this.dc['range'];
				// var value = e.detail.value;
				var value = Number(e.detail.value);
				
				if(range && value){
					// console.log('~~~~~~~', range, value);
					if(value < range[0])
						value = range[0]
					else if(value > range[1]){
						value = range[1]
					}
					this.value = value;
				}
				
				
			    this.retMsg();
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 选择框
	.picker_view {
		width: 100%;
		display: flex;
		margin: auto;
		border-top: 3upx solid #ccc;
		border-bottom: 3upx solid #ccc;
		padding: 20upx;
	}
	.picker_text {
		width: 25%;
	}
	.picker_select {
		width: 100%;
	}
</style>
